<%--
  Created by IntelliJ IDEA.
  User: q7792
  Date: 2018/12/10
  Time: 15:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ include file="/resources/layout/head.jsp" %>

<%@ include file="/resources/layout/admin/headBar.jsp" %>

<%@ include file="/resources/layout/admin/leftBar.jsp" %>
<div class="content">
    <!-- 查询、添加、批量删除、导出、刷新 -->
    <div class="card">
        <div class="card-header">
            <h4 class="page-title">用户管理</h4>
            <ul class="breadcrumb" style="font-size: 16px">
                <li><a href="../index">主页</a></li>
                <li class="active">用户列表</li>
            </ul>
        </div>
        <hr>
        <div class="card-body">
            <div class="pull-right">
                <div class="btn-group">
                    <button type="button" class="btn btn-primary btn-sm" id="btn-add">
                        <i class="fa fa-plus"></i> 添加
                    </button>
                    <button type="button" class="btn btn-primary btn-sm" id="btn-delAll">
                        <i class="fa fa-remove"></i> 批量删除
                    </button>
                    <button type="button" class="btn btn-primary btn-sm" id="btn-export">
                        <i class="fa fa-sign-in"></i> 导出
                    </button>
                    <button type="button" class="btn btn-primary btn-sm" id="btn-re">
                        <i class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
            <div class="row">
                <form id="queryForm">
                    <div class="col-xs-2">
                        <input type="text" id="keyword" name="keyword" class="form-control input-sm"
                               placeholder="关键字"/>
                    </div>
                    <button type="button" class="btn btn-primary btn-sm" id="btn-query">
                        <i class="fa fa-search"></i> 查询
                    </button>
                </form>
            </div>
            <table id="table_local" class="table table-striped table-bordered" style="width:100%">
                <thead>
                <tr>
                    <th><input type="checkbox" id="checkAll"></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>status</th>
                    <th>操作</th>
                </tr>
                </thead>
                <%--<tbody>--%>
                <%--<c:forEach items="${list}" var="user" varStatus="num">--%>
                <%--<tr>--%>
                <%--<td>${num.index}</td>--%>
                <%--<td>${user.login_name}</td>--%>
                <%--<td>${user.login_pwd}</td>--%>
                <%--<td>${user.status}</td>--%>
                <%--<td>--%>
                <%--<button class="btn btn-default edit" value="${user.id }" data-toggle='modal'--%>
                <%--data-target='#showModal'>--%>
                <%--<i class="fa fa-pencil"></i>修改--%>
                <%--</button>&nbsp;--%>
                <%--<a href="#deleteModal" role="button" data-toggle="modal" class="btn btn-default">--%>
                <%--<i class="fa fa-trash-o"></i>删除</a>--%>
                <%--</td>--%>
                <%--</tr>--%>
                <%--</c:forEach>--%>
                <%--</tbody>--%>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
    $().ready(function () {
        //添加、修改异步提交地址
        var url = "./dataTable";
        var tables = $("#table_local").dataTable({
            //lengthMenu: [5, 10, 20, 30],//这里也可以设置分页，但是不能设置具体内容，只能是一维或二维数组的方式，所以推荐下面language里面的写法。
            pageLength: 10,//首次加载的数据条数
            paging: true,//分页
            ordering: false,//是否启用排序
            searching: false,//搜索操作在服务端进行，所以可以关了。
            responsive: true,
            serverSide: true,//分页，取数据等等的都放到服务端去
            ajax: {
                url: url,
                type: "POST",
                contentType: 'application/json',
                dataSrc: 'data',
                data: function (d) {
                    // return JSON.stringify(d);
                    var str = {
                        "draw": d.draw,
                        "start": d.start,
                        "length": d.length,
                        "search": d.search.value
                    };
                    //自定义需要传递的参数。
                    return JSON.stringify(str);
                }
            },
            columns: [//对应上面thead里面的序列
                {"data": null, "width": "10px"},
                {"data": 'id'},
                {"data": 'name'},
                {"data": 'login_name'},
                {"data": 'login_pwd'},
                {"data": 'status'},
                {"data": null, "width": "60px"}],
            //操作按钮
            columnDefs: [
                {
                    targets: 0,
                    defaultContent: "<input type='checkbox' name='checkList'>"
                },
                {
                    targets: -1,
                    defaultContent: "<div class='btn-group'>" +
                        "<button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i></button>" +
                        "<button id='delRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-trash-o'></i></button>" +
                        "</div>"
                }
            ],
            language: {
                infoEmpty: "",
                infoFiltered: "",
                lengthMenu: "",
                // lengthMenu: '显示<select class="form-control input-xsmall">'
                //     + '<option value="1">1</option>'
                //     + '<option value="10">10</option>'
                //     + '<option value="20">20</option>'
                //     + '<option value="30">30</option>'
                //     + '<option value="40">40</option>'
                //     + '<option value="50">50</option>'
                //     + '</select>条记录',//左上角的分页大小显示。

                paginate: {//分页的样式内容。
                    previous: "上一页",
                    next: "下一页",
                    first: "首页",
                    last: "尾页"
                },
                zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。
                //下面三者构成了总体的左下角的内容。
                info: "第 _START_ - _END_ 条，共 _TOTAL_ 条， _PAGES_ 页", //左下角的信息显示，大写的词为关键字。"总共 _PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",
                infoEmpty: "0条记录",//筛选为空时左下角的显示。
                infoFiltered: ""//筛选之后的左下角筛选提示，
            },
            paging: true,
            pagingType: "full_numbers",//分页样式的类型

        });
        //查询按钮
        $("#btn-query").on("click", function () {
            tables.fnDraw();//查询后不需要保持分页状态，回首页
        });

        //添加
        $("#btn-add").on("click", function () {
        });

        //批量删除
        $("#btn-delAll").on("click", function () {

        });

        //导出
        $("#btn-export").on("click", function () {
        });

        //刷新
        $("#btn-re").on("click", function () {
            tables.fnDraw(false);//刷新保持分页状态
        });

        //checkbox全选
        $("#checkAll").on("click", function () {
            if ($(this).prop("checked") === true) {
                $("input[name='checkList']").prop("checked", $(this).prop("checked"));
                //$("#dataTable tbody tr").addClass('selected');
                $(this).hasClass('selected')
            } else {
                $("input[name='checkList']").prop("checked", false);
                $("#dataTable tbody tr").removeClass('selected');
            }
        });

        //修改
        $("#dataTable tbody").on("click", "#editRow", function () {
            var data = tables.api().row($(this).parents("tr")).data();
        });

        $("#btn-submit").on("click", function () {
        });

        //删除
        $("#dataTable tbody").on("click", "#delRow", function () {
            var data = tables.api().row($(this).parents("tr")).data();
            if (confirm("是否确认删除这条信息?")) {
                $.ajax({
                    url: '',
                    type: 'delete',
                    dataType: "json",
                    cache: "false",
                    success: function (data) {
                    },
                    error: function (err) {
                    }
                });
            }
        });
    });
</script>
</body>
</html>
